<!DOCTYPE html>
<html>

	<head>
		<!-- 声明文档使用的字符编码 -->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<!-- 为移动设备添加 viewport -->
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
		<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
		<meta name="HandheldFriendly" content="true">
		<!-- 优先使用 IE 最新版本和 Chrome -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>黑图视界</title>
		<meta name="keywords" content="黑图视界">
		<meta name="description" content="黑图视界">
		<script type="text/javascript" src="../js/setFontSize.js"></script>
		<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="../js/bootstrap.min.js" ></script>
		<script type="text/javascript" src="../js/layui/layui.js" ></script>
		<script type="text/javascript" src="../js/vue.js" ></script>
		<script type="text/javascript" src="../js/axios.js" ></script>
		<script type="text/javascript" src="../js/getParameter.js" ></script>
		<link rel="stylesheet" href="../js/layui/css/layui.css" media="all">
		<link rel="stylesheet" href="../css/swiper.min.css" />
		<link rel="stylesheet" href="../css/main.css" />
	</head>

	<body>
	<div id="app">
		<main>
			<section class="profileItem whiteBg mbt30">

					<div class="container">
						<h3 class="commonTitle" @click="selectPic"><i class="icon"></i>预览图片(点击上传图片)</h3>
						<div class="picBox">
							<img :src="gym.src" class="pic radius20" @click="selectPic" id="gymPic"/>
							<input type="file" id="picInput" style="display: none" @change="changePic" >
						</div>
					</div>
					<div class="container">
						<h3 class="commonTitle"><i class="icon"></i>场馆名称</h3>
						<strong><div contentEditable="true" id="gymName">{{gym.name}}</div></strong>
					</div>
					<div class="container">
						<h3 class="commonTitle"><i class="icon"></i>地址</h3>
						<strong><div contentEditable="true" id="gymAddr">{{gym.address}}</div></strong>
					</div>
					<div class="container">
						<h3 class="commonTitle"><i class="icon"></i>场馆简介</h3>
						<div contentEditable="true" id="gymIntroduce">{{gym.introduce}}</div>
					</div>
					<div class="container">
						<h3 class="commonTitle"><i class="icon"></i>项目介绍</h3>
						<div contentEditable="true" id="gymItemDesc">{{gym.itemdesc}}</div>
					</div>
					<div class="container">
						<h3 class="commonTitle"><i class="icon"></i>温馨提示</h3>
						<div contentEditable="true" id="gymNote">{{gym.note}}</div>
					</div>
					<br>
					<br>
					<br>
					<div class="asideBox">
						<div class="container">
							<a class="asideBtn" @click="submit">提交</a>
						</div>
					</div>
			</section>
		</main>
	</div>
		<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="../js/swiper.min.js"></script>
		<script type="text/javascript" src="../js/layer/layer.js" ></script>
		<script type="text/javascript" src="../js/main.js"></script>
	</body>
<script>
	const app = new Vue({
		el:"#app",
		data:{
			gym:{
				name:"",
				address:"",
				itemdesc:"",
				introduce:"",
				note:""
			}
		},
		methods:{
			changePic(){
				let file = document.getElementById("picInput").files[0];
				let URL = window.URL || window.webkitURL;
				let imgURL = URL.createObjectURL(file);
				$("#gymPic").prop("src",imgURL)
			},
			selectPic(){
				$("#picInput").click();
			},
			submit(){
				let formData = new FormData();
				if (document.getElementById("picInput").files.length===0){
					layer.msg("请上传预览图")
				}
				else if ($("#gymName").text()==="") layer.msg("场馆名称不能为空")
				else if ($("#gymAddr").text()==="") layer.msg("场馆地址不能为空")
				else{
					let file = document.getElementById("picInput").files[0];
					formData.append("uploadPic",file,file.name)
					formData.append("name", $("#gymName").text())
					formData.append("address", $("#gymAddr").text())
					formData.append("introduce", $("#gymIntroduce").text())
					formData.append("itemdesc", $("#gymItemDesc").text())
					formData.append("note", $("#gymNote").text())
					const config = {
						headers: { "Content-Type": "multipart/form-data;boundary="+new Date().getTime() }
					};
					axios.post("/gym/addGym",formData,config).then(function (res) {
						if (res.data==="success") {
							layer.msg("申请成功，请等待审核通过")
							location.href = "/managerclient/myGymList.html"
						}
						else if (res.data==="noLogin") location.href = "/managerclient/login.html"
						else if (res.data==="noPic") layer.msg("申请失败，请上传jpg或png格式图片")
					})
				}

			}
		},
		created(){

		}
	})
</script>
</html>